<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta name="screen-orientation" content="portrait">
    <meta name="x5-orientation" content="portrait">
    <title>收款二维码</title>
    <link rel="stylesheet" href="../../styles/h5/reset.min.css">
    <link rel="stylesheet" href="../../styles/h5/errortankuang.css"/>
    <!--以上为公共css文件-->
    <link rel="stylesheet" href="../../styles/h5/index.css">

    <script charset="utf-8" type="text/javascript" src="../../scripts/h5/jquery-1.9.1.min.js"></script>
    <script charset="utf-8" type="text/javascript" src="../../scripts/h5/jquery.modal.js"></script>
    <!--以上为公共js文件-->
</head>
<style>
    #imgBox img {
        width: 100%
    }
</style>
<body style="background: #313134">
<div align="center">
    <img id="bg" src="../../image/h5/ewmnew.png" style="width:100%;height:10.31rem;display:none">
    <div id="divOne" style="display:none"></div>
    <img id="ewm" style="width:43%;display:none">
</div>
<div id="imgBox" align="center">
</div>
<div class="zz-all-ewm" style="display:none">
    <canvas id="hb" style="height:10.31rem;"></canvas>
</div>
<div class="zz-long-press">
    长按上图，选择保存图片
</div>
<script charset="utf-8" type="text/javascript" src="../../scripts/h5/utils.js"></script>
<script charset="utf-8" type="text/javascript" src="../../scripts/h5/index.js"></script>

<script>
	
	var queryURLParameter = utils.queryURLParameter();
	var storeId = queryURLParameter.storeId;
	var qrCode = '';
	var qrCodeUrl = '';
 	$.ajax({
        url: utils.ajaxUrl()+"h5/store/receiver/getQrIdByStoreId",
        async: false,
        data:{
        	storeId:storeId
        },
        type: 'get',
        success: function (res) {
        	var res = JSON.parse(res);
        	//console.log(res);
            if (res && res.retCode == '0000') {
            	qrCode = res["qrCode"];
            	qrCodeUrl = utils.ajaxUrl()+"h5/store/receiver/getStoreEwm?storeId="+storeId+"&qrCode="+qrCode;
            }else {
                new $.modal({
                    content: res.retMsg,//弹框内容
                    showcontent: true,//false为弹出框组件二，true为弹出框组件一
                }).show();
            }
        }
    });
    
    
    //$("#ewm").attr('src', qrCodeUrl);
    $("document").ready(function () {
        draw(function () {
            document.getElementById('imgBox').innerHTML = '<img src="' + base64[0] + '">';
        })
    });

    var data = [$("#bg").attr("src"), qrCodeUrl], base64 = [];
	
    function draw(fn) {
        var c = document.getElementById("hb");
        ctx = c.getContext('2d');

        len = data.length;
        c.width = $("#bg").width();
        c.height = ($("#bg").height());
        ctx.rect(0, 0, c.width, c.height);
        ctx.fillStyle = '#000000';
        ctx.fill();
        ewmW = (c.width) * 0.288;
        ewmh = (c.width) * 0.405;
        numh = (c.width) * 0.87;
        ewm = $("#ewm").width();
        fontc = (c.width) * 0.5;
        var devicePixelRatio = window.devicePixelRatio || 1, backingStoreRatio = ctx.webkitBackingStorePixelRatio || ctx.mozBackingStorePixelRatio || ctx.msBackingStorePixelRatio || ctx.oBackingStorePixelRatio || ctx.backingStorePixelRatio || 1, ratio = devicePixelRatio / backingStoreRatio;
        //获取手机的DPR
        var oldWidth = c.width;
        var oldHeight = c.height;
        c.width = oldWidth * ratio;
        c.height = oldHeight * ratio;
        c.style.width = oldWidth + 'px';
        c.style.height = oldHeight + 'px';
        ctx.scale(ratio, ratio);
        function drawing(n) {
            if (n < len) {
                var img = new Image;
                img.crossOrigin = 'Anonymous'; //解决跨域
                img.src = data[n];
                img.onload = function () {
                    if (n == 1) {
                        ctx.font = "13px arial";
                        ctx.textAlign = "center";
                        ctx.fillStyle = '#fff';
                        ctx.fillText("NO."+qrCode, fontc, numh);
                        ctx.drawImage(img, ewmW, ewmh, ewm, ewm);
                    }
                    else {
                        ctx.drawImage(img, 0, 0, c.width / ratio, c.height / ratio);
                    }
                    drawing(n + 1);//递归
                }
            }
            else {
                //保存生成作品图片
                convertCanvasToImage(c);
            }
        }

        drawing(0);
    }
    function convertCanvasToImage(canvas) {
        var hc_image = new Image();
        hc_image.src = canvas.toDataURL("image/png");
        $('#imgBox').html(hc_image);
    }

    $("html").css("background", "#313134")
</script>
</body>
</html>